<#include "../common/_layout.html" />
<@layout>
        <#if msg??>
        <div class="row">
            <div class="span5 offset4">
              <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4>Error!</h4>
                ${msg!}
            </div>
          </div>
      </div>
        </#if>
    <div id="signup-box" class="row">
       <div class="span5 offset3">
          <form class="form-horizontal" id="signupForm" action="user/save" method="post">
                <div class="control-group">
                    <div class="controls">
                        <span class="help-block">Already have an account? <a
                            href="login">Login here</a>
                        </span>
                    </div>
                </div>
                <div class="control-group <#if nameMsg??>error</#if>">
                    <label class="control-label" for="inputAccount">Account</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-user"></i></span>
                            <input type="text" minlength="5" maxlength="15" id="inputAccount" name="user.name" value="${(user.name)!}" placeholder="User name" required>
                        </div>
                        <p class="text-error">${nameMsg!}</p>
                    </div>
                </div>
                <div class="control-group <#if emailMsg??>error</#if>">
                    <label class="control-label" for="inputEmai">Email</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-envelope"></i></span>
                            <input type="email" id="inputEmail" name="user.email" value="${(user.email)!}" placeholder="Email" required>
                        </div>
                        <p class="text-error">${emailMsg!}</p>
                    </div>
                </div>
                <div class="control-group <#if passwordMsg??>error</#if>">
                    <label class="control-label" for="inputPassword">Password</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-lock"></i></span>
                            <input type="password" minlength="6" maxlength="20" id="inputPassword" name="user.pass" placeholder="Password" required>
                        </div>
                        <p class="text-error">${passwordMsg!}</p>
                    </div>
                </div>
                <div class="control-group <#if captchaMsg??>error</#if>">
                    <label class="control-label" for="inputCaptcha">Captcha</label>
                    <div class="controls">
                        <div class="input-prepend">
                            <span class="add-on"><i class="icon-check"></i></span>
                            <input type="text" minlength="6" maxlength="6" id="inputCaptcha" class="input-small" name="captcha" required> 
                            <span id="captcha"><a id="captcha" onclick="getCaptcha();" href="javascript:;" title="click to change another one"><img id="captcha" src="captcha" /></a></span>
                        </div>
                        <p class="text-error">${captchaMsg!}</p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="controls">
                        <input type="submit" class="btn btn-success" value="Signup">
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <script src='assets/jquery-validation/dist/jquery.validate.min.js' type='text/javascript'></script>
    <script language="javascript" type="text/javascript">   
    	function getCaptcha() {
			$("img#captcha").attr("src", "${baseUrl!}captcha?r="+Math.random());
			$(":input[name='captcha']").val("");
		}
		$().ready(function() {
			$("#signupForm").validate();
		});
	</script>
	
</@layout>